<template>
    <div class="caini">

        <p class="cai">猜你不喜欢</p>
        <ul>
            <li v-for="value in tableData">
                <img src="../../public/image/cardimg5.jpg" alt="">
               <div class="sp">
                   <span class="na">{{value.name}}</span> <br>
                   <span class="pr">票价:{{value.price}}起</span>
               </div>

            </li>

        </ul>
<!--        <ul>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg1.jpg" />-->
<!--                <span></span>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg2.jpg" />-->
<!--                <p class="ming">这不是我的空城</p>-->
<!--                <p class="price">票价:100起</p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg3.jpg" />-->
<!--                <p class="ming">这不是我的空城</p>-->
<!--                <p class="price">票价:100起</p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg4.jpg" />-->
<!--                <p class="ming">这不是我的空城</p>-->
<!--                <p class="price">票价:100起</p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg5.jpg" />-->
<!--                <p class="ming">这不是我的空城</p>-->
<!--                <p class="price">票价:100起</p>-->
<!--            </li>-->
<!--            <li>-->
<!--                <img src="../../public/image/cardimg1.jpg" />-->
<!--                <p class="ming">这不是我的空城</p>-->
<!--                <p class="price">票价:100起</p>-->
<!--            </li>-->
<!--        </ul>-->

    </div>
</template>

<script>

    export default {
        data() {
            return{
                tableData:[]
            }
        } ,
        mounted:function() {
            this.axios.get('/api/getData').then(res=>{
                console.log(res.data)
                this.tableData=res.data;
            })
        },

    }
</script>

<style scoped>
    *{
        list-style: none;
    }
    img{
        width: 140px;
        height: 200px;
    }
    .caini{
        margin-top: 90px;
    }
    .caini ul li{
        display: inline-block;
        margin-left: 20px;
    }

    .cai{
     margin: auto;
     width: 200px;
     height: 50px;
     line-height: 50px;
     color: whitesmoke;
     background-color: palevioletred;
 }
    .ming{
        margin-top:-2px ;
    }
    .price{
        margin-top: -8px;
    }
    .na{
       margin-top: 330px;
    }
</style>